<template>
  <el-container style="height: 1300px;padding-bottom: 0">
    <el-header height="auto">
      <el-image :src=banner  style="overflow: visible"/>
      <nav-menu></nav-menu>
    </el-header>
    <el-main class="bg" :style="{backgroundImage: 'url(' + backgroundImageURL + ')'}">
      <router-view style="justify-content: center;"/>
    </el-main>
    <el-footer style="background-color: rgb(220,25,29);float: bottom"></el-footer>
  </el-container>
</template>

<script>
import NavMenu from "@/components/NavMenu";
export default {
  name: "Main",
  components: {NavMenu},
  data() {
    return {
      banner: require('../assets/i-banner.jpg'),
      backgroundImageURL: require('../assets/sgb.png')
    }
  }
}
</script>

<style scoped>
.el-header,.el-footer{
  padding: 0;
  opacity: 0.8;
}
.bg {
  width: 100%;
  height: 100%;
  /*background: rgba(0,0,0,0.5);*/
  background-repeat:no-repeat;
  background-size:100% 100%;
  margin-top: 0;
  display: flex;
  align-items:center;
  justify-content: center;
}
.el-main {
  padding: 0;
}

</style>
